/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="modal-box" style="margin-bottom: 0;">
    <p class="title">
      <b class="left">每月支出情况(万元)</b>
    </p>
    <div class="main">
      <v-chart auto-resize :options="options" style="width: 100%; height: 100%;" theme="macarons" ref="chart"/>
    </div>
  </div>
</template>

<script>
import ECharts from "vue-echarts";

const getChartOptions = data => {
  if (!data) return {};
  let chartOptions = {
    grid: {
      top: "6%",
      left: "3%",
      right: "4%",
      bottom: 15,
      containLabel: true
    },
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.date
    },
    yAxis: {
      type: "value"
    },
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 0,
        end: 50,
        handleIcon:
          "M512 512m-245.45454521484373 0a10.546875 10.546875 0 1 0 490.9090913085937 0 10.546875 10.546875 0 1 0-490.9090913085937 0Z",
        // handleSize: 8,
        height: 8,
        bottom: 1,
        fillerColor: "#ddd",
        textStyle: {
          color: "#fff",
          fontSize: window.chartFontSize
        },
        // left: 55,
        // right: 55,
        showDetail: false,
        showDataShadow: true
      },
      {
        type: "inside",
        realtime: true,
        start: 0,
        end: 50
      }
    ],
    series: [
      {
        name: "支出情况",
        data: data.pay,
        type: "line",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(60, 214, 134,1)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(60, 214, 134,0.3)" // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          }
        }
      }
    ]
  };
  return chartOptions;
};

export default {
  props: {
    monthPay: Object
  },
  data() {
    return {
      options: getChartOptions(this.monthPay)
    };
  },
  watch: {
    monthPay: function(data){
      this.options = getChartOptions(data);
    }
  },
  mounted() {
    const self = this;
    // 动态变化
    let chartObj = self.$refs.chart;
    self.startPersent = 0;
    setInterval(function() {
      // 取消之前高亮的图形
      chartObj.dispatchAction({
        type: "dataZoom",
        start: self.startPersent,
        end: self.startPersent + 50
      });
      self.startPersent = self.startPersent + 10;
      if (self.startPersent > 50) {
        self.startPersent = 0;
      }
    },3000);
  },
  components: {
    "v-chart": ECharts
  }
};
</script>

<style lang='less' scoped>

  .main {
    width: 100%;
    height:130px;
  }
</style>
